<template>
  <div class="login">
    <div class="background">
      <div class="login_logo">
        <img src="../assets/login_logo.png" />
      </div>
      <div class="login_wrapper">
        <label
          ><input
            type="text"
            placeholder="请输入用户名"
            name="username"
            v-model="usesrname"
        /></label>
        <label
          ><input
            type="password"
            placeholder="请输入密码"
            name="pwd"
            v-model="pwd"
             @keyup.enter="login_fc"
        /></label>
        <label><button class="click_bt" @click="login_fc">登录</button></label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      usesrname: "",
      pwd: "",
    };
  },
  methods: {
    login_fc() {
      let that = this;
      var url = this.HOME + "/login";
      if( this.usesrname == "" || this.pwd == "") {
        this.$message.warning("用户名和密码为空！")
        return
      }
      that
        .$axios({
          method: "post", //指定请求方式
          url: url, //请求接口（相对接口，后面会介绍到）
          data: {
            username: this.usesrname,
            pwd: this.pwd,
          }, //欢迎加入全栈开发交流圈一起学习交流：864305860
        }) //面向1-3年前端人员
        .then(res=> {
          if (res["data"]["msg"] == "登录成功") {
            console.log(res)
            that.$message.success(res["data"]["msg"])
            localStorage.setItem("token",res["data"]["token"]);
            localStorage.setItem("loverId",res["data"]["loverId"]);
            localStorage.setItem("user",JSON.stringify(res["data"]));
            //获取未登录的时候跳到登录页面的redirect地址
            const redirect = this.$route.query.redirect;
            if (redirect) {
              //存在回跳地址就回跳
              this.$router.push(redirect);
            } else {
              //否则就跳到默认的首页
              this.$router.push('/home/doctor');
            }
          }else{
            that.$message(res["data"]["msg"])}
          
          //console.log(res);
          //帮助突破技术瓶颈，提升思维能力
          //接口成功返回结果执行
        })
        .catch(function (err) {
          throw err;
          //请求失败或者接口返回失败或者.then()中的代码发生错误时执行
        });
    },
  },
};
</script>
<style>

</style>
<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: ShouXie;
}

.login {
  margin-top: 20px;
}
img {
  max-width: 100%;
}
.login_logo {
  width: 60%;
  margin: 0 auto;
  margin-bottom: 5px;
}
.login_wrapper {
  width: 75%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  border: 5px solid rgba(133, 133, 133, 1);
  border-radius: 10%;
}
.login_wrapper label {
  margin: 15px auto 5px auto;
  width: 100%;
  margin-bottom: 30px;
}
.login_wrapper label input {
  height: 40px;
  width: 90%;
  border: 5px solid rgba(159, 194, 139, 1);
  border-radius: 15%;
  font-size: 18px;
  color: rgba(8, 9, 10, 0.88);
  background-color: rgba(247, 240, 228, 0.8);
}
.login_wrapper label button {
  height: 60px;
  width: 60%;
  border: 5px solid rgba(165, 164, 164, 1);
  border-radius: 15%;
  font-size: 30px;
  color: rgba(8, 9, 10, 0.88);
  background-color: rgba(247, 240, 228, 0.8);
}
</style>